<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px">

        <el-row :gutter="20">
                      <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="temp.name" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="登录名" prop="loginname">
                  <el-input v-model="temp.loginname" />
                </el-form-item>
            </el-col>
            <!--<el-col :span="12">
                <el-form-item label="passwordBcrypt" prop="passwordBcrypt">
                  <el-input v-model="temp.passwordBcrypt" />
                </el-form-item>
            </el-col>-->

            <el-col :span="12">
                <el-form-item label="密码" prop="passwordBcrypt">
                  <el-input v-model="temp.passwordBcrypt"  placeholder="需重置密码时输入新密码"/>
                </el-form-item>
            </el-col>
            <!--<el-col :span="12">
                <el-form-item label="重复密码" prop="passwordBcrypt2">
                  <el-input v-model="temp.passwordBcrypt2"  placeholder="需重置密码时输入"/>
                </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="手机" prop="phone">
                <el-input v-model="temp.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="所属单位" prop="tmptAuthDeptPostId">
                  <el-cascader
                    v-model="temp.tmptAuthDeptPostId"
                    :options="treeData4Dept"
                    :show-all-levels="true"
                    :props="defaultProps4Dept"
                    @change="handleDeptChange"
                    style="width: 100%"
                  >
                    <template slot-scope="{ node, data }">
                      <span>{{ data.name }}</span>
                      <span v-if="!node.isLeaf"> ({{ data.tmptAuthDeptList.length }}) </span>
                    </template>
                  </el-cascader>
                </el-form-item>
            </el-col>
            <!--<el-col :span="12">
                <el-form-item label="内部职务" prop="tmptAuthPosition">
                  <select-option
                      v-model="temp.tmptAuthPosition"
                      :clearable=false
                      prop-name="TmptAuthPosition"
                      :prop-ds-type=1
                      prop-url="/city/enum/getData4AddBy"
                  />
                </el-form-item>
            </el-col>-->

            <el-col :span="24">
              <el-form-item label="角色" prop="title">
                <el-select v-model="myRoleIds" multiple placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in roles"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>

          <!--<el-col :span="12">
                <el-form-item label="用户类型" prop="tmptUserType">
                  <select-option
                      v-model="temp.tmptUserType"
                      :clearable=false
                      prop-name="TmptUserType"
                      :prop-ds-type=1
                      prop-url="/city/enum/getData4AddBy"
                  />
                </el-form-item>
            </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <select-option
                v-model="temp.sex"
                :clearable=false
                prop-name="Sex"
                :prop-ds-type=1
                prop-url="/city/enum/getData4AddBy"
              />
            </el-form-item>
          </el-col>
            <el-col :span="24">
                <el-form-item label="管理区域" prop="ctcRegionId">
                  <el-cascader
                    v-model="temp.ctcRegionId"
                    :options="treeData4Region"
                    :show-all-levels="true"
                    :props="defaultProps4Region"
                    @change="handleRegionChange"
                    style="width: 100%"
                  >
                    <template slot-scope="{ node, data }">
                      <span>{{ data.name }}</span>
                      <span v-if="!node.isLeaf"> ({{ data.ctcRegionList.length }}) </span>
                    </template>
                  </el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="身份证" prop="idcardno">
                  <el-input v-model="temp.idcardno" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="email" prop="email">
                  <el-input v-model="temp.email" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="temp.jobNumber" />
                </el-form-item>
            </el-col>-->
            <!--<el-col :span="12">
                <el-form-item label="clientId" prop="clientId">
                  <el-input v-model="temp.clientId" />
                </el-form-item>
            </el-col>-->
        </el-row>
    </el-form>
  </div>
</template>

<script>
import {createApi, updateApi, fetchList, treeApi4Region, treeApi4Dept, getRoleList} from './my-api'
// 导入多选项组件
import SelectOption from '@/views/coding/components/SelectOption'

export default {
    name: 'TmptAuthUser-MyFormDetail',

    components: { SelectOption },

    props: {
        isModule: {
            type: Boolean,
            default: false
        },
        row: {}
    },

    data() {
      var checkMobile = (rule,value,cb)=>{
        const regMobile =  /^[1][3,4,5,7,8][0-9]{9}$/;
        if(regMobile.test(value)){
          return cb()
        }
        cb(new Error("只能输入11位手机号"))
      };
        return {
            treeData4Region:[],
            treeData4Dept:[],
            defaultProps4Region: {
                children: 'ctcRegionList',
                label: 'name',
                value: 'id',
                expandTrigger: 'hover',
                checkStrictly: true
            },
            defaultProps4Dept: {
                children: 'tmptAuthDeptList',
                label: 'name',
                value: 'id',
                expandTrigger: 'hover',
                checkStrictly: true
            },
            rules: {
                name: [{ required: true, message: 'required', trigger: 'blur' }],
                loginname: [{ required: true, message: 'required', trigger: 'blur' }],
                tmptAuthDeptPostId: [{ required: true, message: 'required', trigger: 'blur' }],
                tmptAuthPosition: [{ required: true, message: 'required', trigger: 'blur' }],
                //tmptUserType: [{ required: true, message: 'required', trigger: 'blur' }],
                //idcardno: [{ required: true, message: 'required', trigger: 'blur' }],
                //email: [{ required: true, message: 'required', trigger: 'blur' }],
                //jobNumber: [{ required: true, message: 'required', trigger: 'blur' }],
                //passwordBcrypt: [{ required: true, message: 'required', trigger: 'blur' }],
                phone: [{ required: true, message: 'required', trigger: 'blur' }, {validator:checkMobile,trigger: 'blur'}],
            },
            temp: {
            },
            roles:[],
            myRoleIds: [],
        }
    },

    watch: {
        'row': {
            immediate: true, // vue首次赋值不触发watch的解决方法
            handler: function(nval){
                if (this.isModule) {
                    // this.temp = Object.assign({}, this.row) // copy obj
                    if (nval === undefined) {return}
                    if (nval.id === undefined) {return}
                    this.getList(nval.id)
                }
            }
        }
    },
    created() {
        this.initTree4Region()
        this.initTree4Dept()
        this.initRole()
    },
    methods: {
        initTree4Region() {
            treeApi4Region({ id: 0 }).then((result) => {
                if (result.success) {
                    this.treeData4Region = result.obj.ctcRegionList
                }
            })
        },

        initTree4Dept() {
            treeApi4Dept({ id: 0 }).then((result) => {
                if (result.success) {
                    this.treeData4Dept = result.obj.tmptAuthDeptList
                }
            })
        },

        initRole() {
            // get role list
            getRoleList().then(result => {
                if (result.success) {
                  this.roles = result.list
                }
            })
        },

        getList(_id) {
            this.resetTemp()
            fetchList({id:_id}).then(result => {
                if (!result.success) {
                    this.notify(result)
                    return
                }
                this.temp = result.map.rows[0]
                // 选中当前选项
                if (this.temp.roleIds) {
                    this.myRoleIds = this.temp.roleIds.split(',').map(Number)
                } else {
                    this.myRoleIds = []
                }
            })
        },

        // 给外部调用，清空form
        resetTemp() {
            this.temp = {
                name: '',
                loginname: '',
                passwordBcrypt: '',
                tmptAuthDeptPostId: '',
                tmptAuthPosition: '',
                tmptUserType: '',
                ctcRegionId: '',
                idcardno: '',
                email: '',
                jobNumber: '',
                phone: '',
                telephone: '',
                sex: 1,
                clientId: '',
                id: undefined
            }
            // roles: [],
            this.myRoleIds = []
        },
        // 给外部调用，设置默认值，请根据实际情况修改id值
        defaultTemp() {
            this.temp = {
                tmptAuthPosition: 0, //设置默认值
                tmptUserType: 1, //设置默认值
                sex: 1, //设置默认值
            }
        },
        // 树表： 拿当前节点ID作为父节点ID，建立树关系
        setParentNodeId(id) {
            this.temp.tmptAuthUserId = id
        },
        // 给外部调用，插入记录
        createData() {
            if (this.isNull(this.temp.passwordBcrypt)) {
              this.notify({'success':false, type:'warning', content:'请输入密码'})
              return;
            }
            if (this.temp.passwordBcrypt.length<6) {
              this.notify({success:false, type:'warning', content:'密码至少6位数'})
              return;
            }
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const param = Object.assign({}, this.temp)
                    //
                    param.roleIds = ''+this.myRoleIds
                    createApi(param).then((r) => {
                        this.notify(r)
                        if (r.success) {
                            this.resetTemp()
                            // 从父组件调用此方法，进行回调下
                            if (this.isModule) {
                                this.$emit('createResult')
                            }
                        }
                    })
                }
            })
        },
        // 给外部调用，修改记录
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const param = { id:this.temp.id }
                    param.name = this.temp.name
                    param.loginname = this.temp.loginname
                    param.passwordBcrypt = this.temp.passwordBcrypt
                    param.tmptAuthDeptPostId = this.temp.tmptAuthDeptPostId
                    param.tmptAuthPosition = this.temp.tmptAuthPosition
                    param.tmptUserType = this.temp.tmptUserType
                    param.ctcRegionId = this.temp.ctcRegionId
                    param.idcardno = this.temp.idcardno
                    param.email = this.temp.email
                    param.jobNumber = this.temp.jobNumber
                    param.phone = this.temp.phone
                    param.telephone = this.temp.telephone
                    param.sex = this.temp.sex
                    // param.clientId = this.temp.clientId
                    //
                    param.tmptAuthDeptId = this.temp.tmptAuthDeptId
                    param.roleIds = ''+this.myRoleIds
                    console.log(param)
                    updateApi(param).then((r) => {
                        this.notify(r)
                        if (r.success) {
                            this.resetTemp()
                            // 从父组件调用此方法，进行回调下
                            if (this.isModule) {
                                this.$emit('updateResult')
                            }
                        }
                    })
                }
            })
        },
        // 给外部调用，清除校验
        clearValidate() {
            this.$refs['dataForm'].clearValidate()
        },
        handleRegionChange(val) {
            if (val===undefined) return
            this.temp.ctcRegionId = val[val.length-1]
        },
        handleDeptChange(val) {
            if (val===undefined) return
            if (val.length<1) {
                return
            }
            this.temp.tmptAuthDeptId = val[0]
            this.temp.tmptAuthDeptPostId = val[val.length - 1]
        }
    }

}
</script>
<style>

</style>
